<template>
  <div class="main">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" v-if="!$route.meta.isAuth" :key="$route.path" />
      </keep-alive>
      <component :is="Component" v-if="$route.meta.isAuth" :key="$route.path" />
    </router-view>
    <van-tabbar v-model="active">
      <van-tabbar-item name="/shopping" replace to="/shopping" badge="20" icon="wap-home-o">购物</van-tabbar-item>
      <van-tabbar-item name="/cart" replace to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item name="/order" replace to="/order" icon="balance-list-o">待提货</van-tabbar-item>
      <van-tabbar-item name="/personal" replace to="/personal" icon="user-circle-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: this.$route.path,
    }
  },
}
</script>


<style scoped lang="less">
.main {
  flex: 1;
  overflow-x: hidden;
  display: flex;
}
</style>